<template>
	<!--本文件由FirstUI授权予四川翻山鸣科技有限公司（会员ID：5 6 3，营业执照号：  91  51010 0 M A C U 3 C2K 1     H）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
	<view class="page-box">
		<fui-nav-bar title="个人中心" background="rgba(0,0,0,0)" isFixed isOccupy color="#333"></fui-nav-bar>
		<!-- 头像  用户信息 -->
		<view class="userinfo fui-flex">
			<fui-avatar width="100" :text="userInfo.loginName"></fui-avatar>
			<view class="userNameBox">
				<view>
					推手用户名
				</view>
				<view class="userName" @click="clickToLogin">{{userInfo.loginName || '未登录'}}</view>
			</view>
		</view>
		<!-- 数量卡片 -->
		<!-- <view class="member fui-align__center" style="justify-content: space-around;" @click="clickVIP()">
			<view class="fui-align__center fui-flex__column" style="color: #FFC522;font-size: 30rpx;padding-top: 4rpx;">
				<view>商家量</view>
				<view style="color: #ffe942;font-size: 24rpx;padding-top: 4rpx;">
					{{'100'}}
				</view>
			</view>
			<view class="fui-align__center fui-flex__column" style="color: #FFC522;font-size: 30rpx;padding-top: 4rpx;">
				<view>订单量</view>
				<view style="color: #ffe942;font-size: 24rpx;padding-top: 4rpx;">
					{{'100'}}
				</view>
			</view>
			<view class="fui-align__center fui-flex__column" style="color: #FFC522;font-size: 30rpx;padding-top: 4rpx;">
				<view>余额</view>
				<view style="color: #ffe942;font-size: 24rpx;padding-top: 4rpx;">
					{{'100'}}
				</view>
			</view>
		</view> -->
		<!-- tab -->
		<view class="order_box">
			<view class="flex_box fui-align__center">
				<view class="fui-align__center fui-flex__column" @click="$t.to('/pages/tabbar/my/entryMerchant')">
					<fui-icon name="addfriends" size="60" color="#FCB138" ></fui-icon>
					<view class="icon_label">录入商家</view>
				</view>
				<view class="fui-align__center fui-flex__column" @click="$t.to('/pages/tabbar/my/shopList')">
					<fui-icon name="addfriends" size="60" color="#FCB138" ></fui-icon>
					<view class="icon_label">商家列表</view>
				</view>
				<!-- <view class="fui-align__center fui-flex__column" @click="$t.tip('开发中...')">
					<fui-icon name="aftersale" size="60" color="#FCB138" ></fui-icon>
					<view class="icon_label">收益详情</view>
				</view> -->
			</view>
		</view>
		
		<fui-bottom-popup :show="showMenu" @close="closePopup">
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
				style="background-color: #fff;border:1px solid #fff;" plain>
				上传头像
			</button>
		</fui-bottom-popup>
	</view>
</template>

<script>
	import Apis from '@/common/fui-apis.js'
	import {BASE_URL} from "@/env.js"
	export default {
		data() {
			return {
				showMenu: false,
				canvasShow: false,
				level: '',
				LevelByClient: 0,
				levelInfo: [] ,// 会员等级展示
				isLogin: false, // 是否登录
				userInfo:{},
				src: ''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			if (uni.getStorageSync('userInfo')) {
				this.getClient();
				this.isLogin = true;
			} else {
			  uni.navigateTo({
					url: '/pages/login/login'
			  })
			}
		},
		methods: {
			// 点击头像
			clickAvatar() {
				this.showMenu = true;
			},
			closePopup(){
				this.showMenu = false
			},
			// 选择头像
			onChooseAvatar(e) {
				if (e.detail.avatarUrl) {
					var uploadTask = uni.uploadFile({
						url: BASE_URL+'/resource/uploadFile', //仅为示例，非真实的接口地址
						filePath: e.detail.avatarUrl,
						name: 'file',
						success: (res) => {
							// this.upImg(obj)
							let obj = JSON.parse(res.data)
							this.upImg(obj.data)
						},
						fail: (err) => {
							console.log(err)
						}
			
					});
			
				} else {
					return
				}
			},
			// 修改头像
			upImg(e) {
				Apis.updateClient({
					imagePath: e,
					phone: this.userInfo.phoneNumber,
					name: this.userInfo.userName,
					id: this.userInfo.userId
				}).then(res => {
					this.userInfo.imagePath = res.data.imagePath
					uni.setStorageSync('userInfo', this.userInfo);
					this.$t.tip('修改成功')
					this.showMenu = false;
				}).catch(err => {})
			},
			// 去登录
			clickToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				if (!this.userInfo) {
					this.$t.tip('请先登录');
					this.$t.to('/pages/login/login');
				} else {
					this.$t.to('/pages/user/setting/setting')
				}
			},
		},
		onShareAppMessage() {
			return {
				title: 'First UI组件库'
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-box{
		background-image: linear-gradient(to bottom, #d8ec9d, #ffffff, #ffffff);
		height: 100vh;
		.userinfo{
			padding: 0 24rpx;
			margin-bottom: 48rpx;
			.userNameBox{
				margin-left: 16rpx;
				.userName{
					font-size: 28rpx;
					margin-bottom: 24rpx;
				}
				.copy_tag{
					font-size: 28rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border-radius: 22rpx;
					padding: 0 12rpx;
					border: 2rpx solid #ffc94a;
					color: #ffc94a;
					margin-left: 20rpx;
				}
			}
		}
		.member{
			width: 702rpx;
			height: 126rpx;
			margin: 0 auto 24rpx;
			padding: 0 32rpx;
			background: #000;
			border-radius: 18rpx;
			.details-btn{
				background-image: linear-gradient(to right bottom, #d4be80, #fff3e5, #d4be80);
				width: 160rpx;
				height: 60rpx;
				color: #333;
				border-radius: 20rpx;
			}
		}
		.order_box{
			width: 702rpx;
			margin: 0 auto 24rpx;
			padding: 32rpx;
			border-radius: 18rpx;
			background: #fff;
			border: 2rpx solid #eee;
			.flex_box{
				justify-content: space-around;
				.icon_label{
					color: #666;
					margin-top: 12rpx;
				}
			}
		}
		.list_cell_box{
			width: 702rpx;
			margin: 0 auto 24rpx;
			padding: 24rpx;
			border-radius: 18rpx;
			background: #fff;
			border: 2rpx solid #eee;
		}
	}
	
	.fui-icon__close {
		position: absolute;
		right: 24rpx;
		top: 20rpx;
	}
	
	
	
	
	.fui-banner__box {
		width: 100%;
		height: 512rpx;
		background: #EDF9FF;
		position: relative;
	}

	.fui-banner {
		width: 100%;
		height: 512rpx;
		display: block;
	}

	.fui-vip__box {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.fui-mod__box {
		width: 100%;
		height: 124rpx;
		background: #31344D;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
	}

	.fui-vip__bg {
		width: 100%;
		height: 124rpx;
		display: block;
	}

	.fui-vip__btn {
		font-size: 28rpx;
		color: #FFD694;
		position: absolute;
		height: 100%;
		right: 64rpx;
		top: 0;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-menu__wrap {
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
		border-radius: 0 0 16rpx 16rpx;
	}

	.fui-menu__item {
		flex: 1;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 24rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		position: relative;
	}

	.fui-menu__img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 24rpx;
		margin-bottom: 16rpx;
	}

	.fui-menu__img image {
		width: 64rpx;
		height: 64rpx;
		display: block;
	}

	.fui-btn__feedback {
		background: transparent !important;
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		border: 0;
		z-index: 1;
	}

	.fui-btn__feedback::after {
		border: 0;
	}

	.fui-list__wrap {
		padding-top: 32rpx;
	}

	.fui-list__icon {
		width: 48rpx;
		height: 48rpx;
	}

	.fui-list__text {
		padding-left: 24rpx;
	}
</style>